<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from 'vue';
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import {createKey, getObj, uploadObj} from "@/utils/obs";
import MyButton from "@/components/common/myButton.vue";
import {UploadFile} from 'element-plus'
// import {k} from "vite/dist/node/types.d-aGj9QkWt";

const props = defineProps({
  imgHeight: {
    type: Number,
    required: false,
    default: 200,
  },
  imgWidth: {
    type: Number,
    required: false,
    default: 200,
  },
  initImgSrc: {
    type: String,
    required: false,
  }
});
const emits = defineEmits(['emitImgSrc']);
const dialogVisible = ref(false)
const cropper = ref();
const imgSrc = ref();
const imgH = ref();
const imgW = ref();
const option = ref({
  img: '', // 裁剪图片的地址
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'jpeg', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  // autoCropWidth: props.imgWidth, // 默认生成截图框宽度
  // autoCropHeight: props.imgHeight, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [props.imgWidth, props.imgHeight], // 截图框的宽高比例
  full: true, // 是否输出原图比例的截图
  canMove: true, // 是否可以拖动图片
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
})
// 上传按钮   限制图片大小
const changeUpload = (file, fileList) => {
  let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
  const isJPG = testmsg === 'jpg'
  const isPNG = testmsg === 'png'
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG && !isPNG) {
    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!');
    return
  }
  let reader = new FileReader();
  // let data;
  // reader.onload = (e) => {
  //   if (typeof e.target.result === 'object') {
  //     // 把Array Buffer转化为blob 如果是base64不需要
  //     data = window.URL.createObjectURL(new Blob([e.target.result]))
  //   }
  //   else {
  //     data = e.target.result
  //   }
  // }
  nextTick(() => {
    option.value.img = file.url
    console.log(file.url)
    dialogVisible.value = true
  })
}
// 点击裁剪，这一步是可以拿到处理后的地址
const finish = () => {
  cropper.value.getCropBlob((data) => {
    console.log(data)
    const key = createKey();
    uploadObj(data, key);
    emits('emitImgSrc', key);
    let isNewSrc = ref(false);
  //   TODO: 图片回显
    //   这样做显然不对但是能跑。。。
    setTimeout(() => {
      getObj(key, imgSrc);
      dialogVisible.value = false;
    },300);
  //   dialogVisible.value = false;
  //   let timer = setInterval(() => {
  //     console.log(timer);
  //     getObj(key, imgSrc, isNewSrc);
  //     if (isNewSrc.value) {
  //       dialogVisible.value = false;
  //       isNewSrc.value = false;
  //       clearInterval(timer);
  //     }
  //   },10);

    // let timer = setInterval(() => {
    //   console.log('~');
    //   getObj(key, imgSrc, isNewSrc);
    //   if (isNewSrc.value) {
    //     dialogVisible.value = false;
    //     isNewSrc.value = false;
    //     clearInterval(timer);
    //   }
    // },100);
  })
}
watch(() => props, (newValue, oldValue) => {
  imgSrc.value = newValue.initImgSrc;
}, {deep: true, immediate: true});
onMounted(() => {
  document.getElementsByClassName('el-upload')[0].style.height = props.imgHeight + 'px';
  document.getElementsByClassName('el-upload')[0].style.width = props.imgWidth + 'px';
})
</script>

<template>
  <!-- 这个地方似乎只能用js改宽高了，因为实际控制宽高的是这个的子元素 -->
  <el-upload id="upload" ref="pic" list-type="picture-card" action="" :auto-upload="false" :on-change="changeUpload"
             :show-file-list="false">
    <img v-if="imgSrc" :src="imgSrc" style="height: 100%; width: 100%;">
    <span v-else>
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <div class="el-upload__tip">请上传格式为.jpg或.png的图片文件</div>
    </span>
  </el-upload>
  <!-- vueCropper 剪裁图片实现-->
  <el-dialog title="图片剪裁" v-model="dialogVisible" append-to-body>
    <div class="cropper-content">
      <div class="cropper" style="text-align:center">
        <vueCropper ref="cropper" :img="option.img" :outputType="option.outputType"
                    :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
                    :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue"
                    :fixedBox="option.fixedBox"></vueCropper>
      </div>
    </div>
    <div class="dialog-footer">
      <span class="btn-group">
        <my-button type="primary" :width="100" :height="35" @click="finish">确认</my-button>
        <my-button type="light" :width="100" :height="35" @click="dialogVisible = false">取消</my-button>
      </span>
    </div>
  </el-dialog>

</template>

<style scoped>
.cropper {
  width: auto;
  height: 300px;
}
.dialog-footer{
  display: flex;
  width: 100%;
  padding-top: 30px;
  justify-content: center;
  .btn-group {
    display: flex;
    width: 240px;
    justify-content: space-between;
    /*&:deep(.el-button){*/
    /*  background-color: var(--color-light);*/
    /*  border: 1px solid var(--color-plain);*/
    /*  &.el-button--primary {*/
    /*    background-color: var(--color-primary);*/
    /*    border: none;*/
    /*  }*/
    /*  &:hover {*/
    /*    background-color: var(--color-plain);*/
    /*    color: var(--color-primary);*/
    /*    outline: none;*/
    /*  }*/
    /*}*/
  }
}
</style>